<template>
  <div id="dealWater">
    <div class="search">
      条件查询
      <input type="text" placeholder="输入公司名称或负责人信息" v-model="search">
      <el-button type="primary" @click="getAccountFlows">查询</el-button>
    </div>

    <template>
      <el-table
        :data="dealWaters"
        stripe
        style="width: 100%">
        <el-table-column
          prop="type"
          label="开户类型"
          width="180">
        </el-table-column>
        <el-table-column
          prop="_id"
          label="交易流水号"
          width="250">
        </el-table-column>
        <el-table-column
          prop="organization"
          label="机构名称">
        </el-table-column>
        <el-table-column
          prop="registerCapital"
          label="开户金额">
        </el-table-column>
        <el-table-column
          prop="time"
          label="开户时间">
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageData.currentPage"
        :page-sizes="[3, 4, 5]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageData.total"
        >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import apis from '../../../http/apis/apis'
export default {
  mounted() {
    this.getAccountFlows();
  },
  data() {
    return {
      dealWaters: [],
      pageData: {
        currentPage: 1,
        pageSize: 5,
        total: 0,
      },
      search: ''
      
    }
  },
  methods: {
    async getAccountFlows() {
      const {data} = await apis.handles.getAccountFlows({currentPage: this.pageData.currentPage, pageSize: this.pageData.pageSize, search: this.search})
      if(data) {
        this.dealWaters = data.acountFlows
        this.pageData.total = data.total
        console.log(data);
      }
    },
    handleSizeChange(val) {
      this.pageData.pageSize = val
    },
    handleCurrentChange(val) {
      this.pageData.currentPage = val
    }
  },
  watch: {
    pageData: {
      handler() {
        this.getAccountFlows();
      },
      deep: true,
    }
    }
}
</script>

<style lang="scss">
  #dealWater{
    .search {
      margin-bottom: 10px;
      display: flex;
      
      line-height: 40px;
      height: 40px;
      input {
        width: 200px;
        font-size: 14px;
        color: #666;
        height: 30px;
        border-radius: 5px;
        border: none;
        outline: none;
        padding-left: 10px;
        margin: 0 20px;
        margin-top: 5px;
      }
      
    }
    table {
        border-collapse: collapse;
        border: 1px solid #ccc;
        border-bottom: none;
        font-size: 12px;
        th {
          text-align: center;
          border: 1px solid #ccc;
          border-bottom: none;
          padding: 8px 0;
        }
        td {
          border: 1px solid #ccc;
          text-align: center;
          padding: 4px 0;
        }

      }
    .block {
      margin-top: 10px;
      margin-left: 230px;
    }
  }
</style>